<template>
	<view class="pagesDoctorHome">
		<view class="badgeBox">
			<view class="badgeItem" @click="toDataList(1,'待整理')">
				<view class="badgeItem_flex">
					<u--image :src="taskPoolIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						待整理
					</view>
				</view>
				<view :class="[waitingOrganizeCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ waitingOrganizeCount > 0 ? waitingOrganizeCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(2,'待分配')">
				<view class="badgeItem_flex">
					<u--image :src="myIssuesIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						待分配
					</view>
				</view>
				<view :class="[waitingAssignCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ waitingAssignCount > 0 ? waitingAssignCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(3,'待退款')">
				<view class="badgeItem_flex">
					<u--image :src="myInvitedIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						待退款
					</view>
				</view>
				<view :class="[pendingRefundCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ pendingRefundCount > 0 ? pendingRefundCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(4,'诊断中')">
				<view class="badgeItem_flex">
					<u--image :src="myFinishIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						诊断中
					</view>
				</view>
				<view :class="[diagnosisInCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ diagnosisInCount > 0 ? diagnosisInCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(5,'加做诊断中')">
				<view class="badgeItem_flex">
					<u--image :src="myIssuesIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						加做诊断中
					</view>
				</view>
				<view :class="[diagnosisInProgressCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ diagnosisInProgressCount > 0 ? diagnosisInProgressCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(6,'全部')">
				<view class="badgeItem_flex">
					<u--image :src="taskPoolIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						全部
					</view>
				</view>
				<view :class="[allIssuesCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ allIssuesCount > 0 ? allIssuesCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getmanagerElBadge
	} from '@/api/platform/consultationApplyList.js'
	
	export default {
		name: "doctorHome",
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				institutionInfo: state => state.user.institution
			}),

		},
		data() {
			return {
				waitingOrganizeCount: 0,
				waitingAssignCount: 0,
				pendingRefundCount: 0,
				diagnosisInCount: 0,
				allIssuesCount:0,
				diagnosisInProgressCount:0,
				extraProjectMessageList: [], //加做列表
				totalNoreadnum: 0, //沟通未读角标
				taskPoolIcon: '/static/images/index/taskPoolIcon.png', //任务池角标
				myIssuesIcon: '/static/images/index/myIssuesIcon.png', //医生待会诊角标
				myFinishIcon: '/static/images/index/myFinishIcon.png', //医生已会诊角标
				myInvitedIcon: '/static/images/index/myInvitedIcon.png', //医生邀请角标
				myFinalIcon: '/static/images/index/myFinalIcon.png', //医生终审角标
				extraProjectIcon: '/static/images/index/extraProjectIcon.png', //医生终审角标
				noRead: '/static/images/index/noRead.png', //医生终审角标
				totalNoreadnum: 0,

			};
		},
		mounted() {
			// console.log('this.userInfo', this.userInfo)
			this.getmanagerElBadge()
			

		},
		methods: {
			toDataList(id, title) {
				uni.navigateTo({
					url: `/subPackages/doctor/consultationApplyList/consultationApplyList?id=${id}&title=${title}`
				})
			},
			
			getmanagerElBadge() {
				getmanagerElBadge().then(res => {

					if (res.code == 200) {
						this.waitingOrganizeCount = res.prepareToTide
						this.waitingAssignCount = res.prepareToAllocate
						this.allIssuesCount = res.total
						this.diagnosisInProgressCount=res.diagnosisInProgressCount
						this.diagnosisInCount = res.inDiagnosisCount
						this.pendingRefundCount = res.pendingRefundCount
					}
				})
			},
			

		}

	}
</script>

<style lang="scss" scoped>
	.pagesDoctorHome {
		padding-bottom:64rpx;
		.badgeBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.badgeItem {
				min-width: 280rpx;
				box-shadow: 2rpx 2rpx 8rpx 8rpx rgba(32, 108, 228, 0.3);
				border-radius: 16rpx;
				opacity: 1;
				padding: 20rpx;
				margin: 0rpx 20rpx;
				margin-top: 80rpx;

				&_flex {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_num {
					text-align: center;
					font-size: 80rpx;
					height: 100rpx;
					font-weight: 700;
					line-height: 100rpx;

					&_unit {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: 700;
				margin-left: 32rpx;

			}

			.redClass {
				color: #fb0f0f;
			}

			.normalClass {
				color: #bdbdbd;
			}

			.blueClass {
				color: #0fa9fb;
			}

		}
	}
</style>